<template>
	<view class="modify-page">
		<c-layout>
			<c-navigation-bar slot="head" title="My Anchor"></c-navigation-bar>
			<view class="tabs">
				<view class="tabs_aside" :class="active === 0 ? 'active' : ''" @click="active = 0">Whole network</view>
				<view class="tabs_aside" :class="active === 1 ? 'active' : ''" @click="active = 1">Costomized</view>
			</view>
			<!-- 列表 -->
			<view class="networlk" v-for="item in netWorlkList" :key="item.time" v-if="active == 0">
				<view class="time-box">{{ item.time }}</view>

				<uni-list v-for="li in item.list" :key="li.id">
					<uni-list :border="false">
						<!-- 显示圆形头像 -->
						<uni-list-chat :avatar-circle="true" :title="li.name" :avatar="$u.file.getMedieUrl(li.image)" :note="`${li.followers}Followers`">
							<view class="chat-custom-right">
								<text class="chat-custom-text">${{ li.price }}</text>
							</view>
						</uni-list-chat>
					</uni-list>
				</uni-list>
			</view>
			<view class="networlk" v-for="item in costomizedList" :key="item.time" v-if="active == 1">
				<view class="time-box">{{ item.time }}</view>
			
				<uni-list v-for="li in item.list" :key="li.id">
					<uni-list :border="false">
						<!-- 显示圆形头像 -->
						<uni-list-chat :avatar-circle="true" :title="li.name" :avatar="$u.file.getMedieUrl(li.image)" :note="`${li.followers}Followers`">
							<view class="chat-custom-right">
								<text class="chat-custom-text">${{ li.price }}</text>
							</view>
						</uni-list-chat>
					</uni-list>
				</uni-list>
			</view>
		</c-layout>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: 0,
			netWorlkList: [
				{
					time: '11:00 AM Nov 11 th',
					list: [
						{
							name: 'Roller Rabbit',
							image: '@/static/images/home/good-2.png',
							followers: '377.2K',
							price: '999',
							id: 421
						},
						{
							name: 'Roller Rabbit',
							image: '@/static/images/home/good-2.png',
							followers: 377,
							price: '999',
							id: 452
						}
					]
				},
				{
					time: '09:00 AM Nov 11 th',
					list: [
						{
							name: 'Roller Rabbit',
							image: '../../static/images/home/good-2.png',
							followers: 377,
							price: '999',
							id: 451
						},
						{
							name: 'Roller Rabbit',
							image: '../../static/images/home/good-2.png',
							followers: 377,
							price: '999',
							id: 521
						}
					]
				}
			],
			costomizedList: [
							{
								time: '11:00 AM Nov 11 th',
								list: [
									{
										name: 'Roller Rabbit',
										image: '@/static/images/home/good-2.png',
										followers: '377.2K',
										price: '888',
										id: 421
									},
									{
										name: 'Roller Rabbit',
										image: '@/static/images/home/good-2.png',
										followers: 377,
										price: '888',
										id: 452
									}
								]
							},
							{
								time: '09:00 AM Nov 11 th',
								list: [
									{
										name: 'Roller Rabbit',
										image: '../../static/images/home/good-2.png',
										followers: 377,
										price: '888',
										id: 451
									},
									{
										name: 'Roller Rabbit',
										image: '../../static/images/home/good-2.png',
										followers: 377,
										price: '888',
										id: 521
									}
								]
							}
						]
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>

/deep/ .uni-list--border-top {
	display: none;
}
/deep/.uni-list--border-bottom {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 134rpx;
	height: 1px;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	background-color: #e5e5e5;
	width: 530rpx;
}
/deep/.networlk{
		.uni-list:last-child{
			uni-list--border-bottom:last-child{
				display: none !important;
			}
		}
	}
/deep/ .uni-list-chat__header {
	width: 100rpx;
	height: 100rpx;
}
/deep/ .uni-list-chat__content-title {
	font-size: 34rpx;
	color: #0a1f44;
}
/deep/ .uni-list-chat__content-note {
	font-size: 30rpx;
	color: #999cad;
}
/deep/.uni-list-chat {
	font-size: 32rpx;
	color: #4953ed;
}
/deep/.uni-list-chat__content-extra{
	justify-content: center;
}

.time-box {
	font-size: 26rpx;
	color: #2934d0;
	padding:18rpx 0  18rpx 50rpx;
}
.modify-page {
	height: 100vh;
	padding: 0 44rpx;

	.tabs {
		height: 68rpx;
		background: rgba(0, 0, 0, 0.0287);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		width: 539rpx;
		display: flex;
		align-items: center;
		margin: 58rpx auto;
		padding: 0 8rpx;

		.tabs_aside {
			width: 50%;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
			font-weight: 400;
			color: #a5a5a5;
			transition: transform 0.4s;
		}

		.active {
			background: #ffffff;
			box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			height: 56rpx;
			line-height: 56rpx;
			color: #3b2be4;
		}
	}
}
</style>
